<template>
  <transition
    appear
    name="custom-classes-transition"
    enter-active-class="animate__animated animate__faster  animate__fadeInLeft "
    leave-active-class="animate__animated animate__faster animate__fadeOutLeft "
  >
    <div class="left_box" v-if="animate && showMenuRight" id="menu">
      <div class="content">
        <slot></slot>
        <!-- <div class="left-btn" @click="handleMenu()">
                    <img src="../../assets/sidesImages/收起_左.png" alt="">
                </div> -->
      </div>
    </div>
  </transition>
  <AsideBtn v-if="showMenuLeft"></AsideBtn>
  <!-- <div class="showmenu" v-if="!showMenuLeft" @click="handleMenu()">
        <img src="../../assets/sidesImages/展开_左.png" alt="">
    </div> -->
</template>

<script setup lang="ts">
import { useAnimateStore } from "@/stores/animate";

import { computed, ref, toRefs } from "vue";
import { useAppStore } from "@/stores/modules/app";
import { storeToRefs } from "pinia";
const { showMenuLeft } = toRefs(useAppStore());
const { setshowMenuLeft } = useAppStore();
const { showMenuRight } = storeToRefs(useAppStore());
const animatestore = useAnimateStore();
const animate = computed(() => animatestore.$state.Animate);
const showmenu = ref<Boolean>(true);
const handleMenu = () => {
  // if (showmenu.value == true) {
  //     showmenu.value = false
  // } else {
  //     showmenu.value = true
  // }
  setshowMenuLeft();
};
</script>

<style scoped lang="scss">
.left_box {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 22.5vw;
  height: 94vh;
  top: 6vh;
  z-index: 3999;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(
    90deg,
    rgba(6, 29, 38, 0.8) 0%,
    rgba(11, 56, 77, 0.4) 86%,
    rgba(16, 104, 173, 0) 100%
  );

  .content {
    width: 100%;
    height: 100%;
    // border: 1px solid rgba(255, 255, 255, 0.527);
    box-sizing: border-box;
    position: relative;
    display: flex;
    padding: 10px;
    flex-direction: column;

    box-sizing: border-box;

    .left-btn {
      cursor: pointer;
      position: absolute;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}

.showmenu {
  position: absolute;
  top: 54%;
  cursor: pointer;
  transform: translateY(-50%);
  z-index: 9;

  img {
    width: clamp(1.5rem, 1.25vw, 3rem);
  }
}
</style>
